<template>
  <div class="app-container">
    <el-form :inline="true" :model="query" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="query.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="头衔">
        <el-select v-model="query.level" clearable placeholder="头衔">
          <el-option label="高级讲师" value="1"></el-option>
          <el-option label="首席讲师" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="query.begin"
          type="datetime"
          placeholder="选择开始时间"
          align="right"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="query.end"
          type="datetime"
          placeholder="选择结束时间"
          align="right"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="refreshList(1)">查询</el-button>
        <el-button @click="resetForm">清空</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="records"
      border
      fit
      highlight-current-row
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="100">
      </el-table-column>
      <el-table-column
        label="头衔"
        width="80">
        <div slot-scope="scope">
          {{scope.row.level===1?'高级教师':'首席讲师'}}
        </div>
      </el-table-column>
      <el-table-column
        prop="intro"
        label="简介"
        :show-overflow-tooltip="true"
        width="400">
      </el-table-column>

      <el-table-column
        prop="gmtCreate"
        label="添加时间"
        width="160">
      </el-table-column>

      <el-table-column
        prop="sort"
        label="排序"
        width="60">
      </el-table-column>

      <el-table-column
        label="操作"
        width="200">
        <template slot-scope="scope">
          <router-link :to="'/teacher/edit/' + scope.row.id">
            <el-button type="text" size="small">编辑</el-button>
          </router-link>

          <el-button @click="delTeacherById(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="current"
      :page-size="size"
      :total="total"
      style="padding: 30px 0;text-align: center"
      layout="total,prev, pager, next,jumper"
      @current-change="refreshList">
    </el-pagination>
  </div>
</template>

<script>
    import http from "@/api/teacher"

    export default {
        name: "list",
        data() {
            return {
                current: 0,
                size: 10,
                query: {
                    name: '',
                    level: '',
                    begin: '',
                    end: ''
                },
                pages: 0,
                records: [],
                total: 0,
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            }
        },
        methods: {
            refreshList(page) {
                http.getTeacherList(page, this.size, this.query).then(
                    res => {
                        this.current = res.data.current
                        this.pages = res.data.pages
                        this.records = res.data.records
                        this.total = res.data.total
                    }
                )
            },
            resetForm(){
                this.query = {}
                this.refreshList(1)
            },
            delTeacherById(id){
                this.$confirm('删除该教师, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    http.delTeacherById(id).then(res=>{
                        if (this.records.length == 1){
                            this.refreshList(this.current-1)
                        }else {
                            this.refreshList(this.current)
                        }
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    })
                }).catch(()=>{});
            },
            handleClick(row) {
                console.log(row)
            }
        },
        created() {
            this.refreshList(1)
        }
    }
</script>

<style scoped>

</style>
